<template>
  <el-card class="auditlogTool">
    <el-form ref="form" :inline="true" :model="form" label-width="120px">
      <el-form-item label="请求方法：">
        <el-select v-model="form.httpMethod" placeholder="请求方式" size="mini">
          <el-option
            v-for="item in httpMethods"
            :key="item.type"
            :label="item.type"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="哈希异常：">
        <el-select
          v-model="form.hasException"
          placeholder="哈希异常"
          size="mini"
        >
          <el-option
            v-for="item in hasExceptions"
            :key="item.type"
            :label="item.type"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="http状态码：">
        <el-select
          v-model="form.httpStatusCode"
          placeholder="http状态码"
          size="mini"
        >
          <el-option
            v-for="item in allHttpStatusCodes"
            :key="item.type"
            :label="item.type"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="请求URL：">
        <el-input v-model="form.url" size="mini" placeholder="请输入URL" />
      </el-form-item>
      <el-form-item label="用户名：">
        <el-input
          v-model="form.userName"
          size="mini"
          placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item label="应用ID：">
        <el-input
          v-model="form.applicationName"
          size="mini"
          placeholder="请输入应用ID"
        />
      </el-form-item>
      <el-form-item label="最小执行时间：">
        <el-input
          v-model.number="form.minExecutionDuration"
          size="mini"
          placeholder="最小执行时间"
        />
      </el-form-item>
      <el-form-item label="最大执行时间：">
        <el-input
          v-model.number="form.maxExecutionDuration"
          size="mini"
          placeholder="最大执行时间"
        />
      </el-form-item>
      <el-form-item label="接口调用时间：">
        <el-date-picker
          v-model="form.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleSearch">
          查询
        </el-button>
        <el-button size="mini" @click="handleClear"> 重置 </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import HttpStatusCodes from '@/utils/httpStatus'
export default {
  data() {
    return {
      form: {
        httpMethod: '',
        hasException: '',
        httpStatusCode: '',
        url: '',
        userName: '',
        applicationName: '',
        minExecutionDuration: '',
        maxExecutionDuration: '',
        date: ['', '']
      },
      httpMethods: [
        {
          type: '请求方法',
          value: ''
        },
        {
          type: 'get',
          value: 'GET'
        },
        {
          type: 'post',
          value: 'POST'
        },
        {
          type: 'put',
          value: 'PUT'
        },
        {
          type: 'delete',
          value: 'DELETE'
        }
      ],
      hasExceptions: [
        {
          type: '哈希异常',
          value: ''
        },
        {
          type: '异常',
          value: true
        },
        {
          type: '无异常',
          value: false
        }
      ]
    }
  },
  computed: {
    allHttpStatusCodes() {
      const arr = HttpStatusCodes.map(e => {
        return {
          type: e,
          value: e
        }
      })
      arr.unshift({
        type: 'http状态码',
        value: ''
      })
      return arr
    }
  },
  methods: {
    handleSearch() {
      const vm = this
      vm.$emit('search', vm.form)
    },
    handleClear() {
      const vm = this
      vm.form = {
        httpMethod: '',
        hasException: '',
        httpStatusCode: '',
        url: '',
        userName: '',
        applicationName: '',
        minExecutionDuration: '',
        maxExecutionDuration: '',
        date: ['', '']
      }
      vm.handleSearch()
    }
  }
}
</script>

<style lang="scss" scoped>
.auditlogTool {
  margin-bottom: 16px;
  .el-input {
    width: 200.6px;
  }
}
</style>
